// 顶部区域样式
.main-head {
    background: $frame-head-bgcolor;
    height: #{$head-height}px;

    // 顶部菜单区域样式
    .head-menu-panel {
        z-index: 1000;
        height: 100%;
        padding-right: 10px;

        .head-menu {
            height: 100%;
            list-style: none;
            padding: 0;
            margin: 0;

            >li {
                float: left;
                height: 100%;

                >a {
                    color: $frame-head-color;
                    font-size: 13px;
                    font-weight: normal;
                    display: flex;
                    height: 100%;
                    padding: 0 15px;
                    align-items: center;
                    position: relative;

                    &:hover {
                        background-color: mix($frame-head-bgcolor, $white-color, 90%);
                    }
                }

                >a.mini-switch-bar {
                    padding: 0 20px;
                }

                .head-avatar {
                    margin: 0 2px;
                    width: 20px;
                    height: 20px;
                    border: 1px solid $white-color;
                    border-radius: 100px;
                }

                .count-info {
                    label {
                        position: absolute;
                        right: 0px;
                        top: 10px;
                        padding: 1px 5px;
                        line-height: 12px;
                    }
                }

                &.head-message {

                    .hoverdown-menu,
                    .dropdown-menu {
                        width: 350px;

                        .head-message-link {
                            padding: 6px 15px;
                            margin: 0;
                            border-radius: 0;
                            border-bottom: 1px solid $base-border-color;
                        }

                        .head-message-avatar {
                            float: left;
                            line-height: 42px;

                            img {
                                width: 40px;
                                height: 40px;
                                border-radius: 500px;
                            }
                        }

                        .head-message-content {
                            padding-left: 50px;

                            .head-message-title {
                                margin: 5px 0;
                                line-height: 16px;
                            }

                            .head-message-text {
                                margin: 5px 0;
                                line-height: 16px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
               
            }

            .head-notice {

                .hoverdown-menu,
                .dropdown-menu {
                    width: 350px;

                    .head-notice-content {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 10px ;
                        font-size: 12px;
                        color: $body-text-color;
                        border-bottom: 1px solid $base-border-color;
                        &:hover{
                            background-color: #f5f5f5;
                        }
                        &:last-child{
                            border-bottom: none;
                        }

                        .head-notice-text {
                            white-space: normal;
                        }

                        .head-notice-right {
                            text-align: right;
                            padding-left: 5px;
                            white-space: nowrap;
                        }
                    }
                }
            }

        }
    }
}


// 迷你菜单模式页面布局
.mini-menu {
    .main-head {
        .head-logo-panel {
            width: #{$mini-left-width}px;

            .mini-head-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                color: $frame-head-logo-color;
            }

            .head-logo {
                display: none;
            }
        }
    }
}